import axios from 'axios';
import Vuex from 'vuex';
import Vue from 'vue/dist/vue.js';
import {config} from '../../spa/configData.js';
import unit from '../../js/tool/unit.js';
import kfm_png from '../../img/kfm.png';
import cp_ii from '../../spa/effect/Connected_Particles_II/Connected_Particles_II.js';
Vue.use(Vuex);
/*
* 符号说明:
    * *  :表示非组件
    * +* :表示根组件
    * -* :表示子组件
* index
* record_event
    +* root
        -* index
            -* folder
        -* CDA
* */
/*
* 因为代码调整,所以需要重写自适应
* */
let record_event = (function(){
    let RE_config={
        logoSrc:kfm_png
    };
    let RE_unit = {
        store:new Vuex.Store({
            state: {
                listData: {
                    date:'',
                    listName:'',
                    article:[]
                },
                articleData:{
                    title:'',
                    content:'ttt'
                },
                show:{
                    show:true
                },
                isArticleShow:true,
                indexShow:true
            },
            mutations: {
                updateListData: (state,newData)=> {
                    state.listData = newData;
                },
                updateArticle: (state,newData)=> {
                    state.articleData = newData;
                },
                updateShow:(state,newData)=>{
                    state.show = newData;
                },
                updateIsArticleShow:(state,newData)=>{
                    state.isArticleShow = newData;
                },
                updateIndexShow:(state,newData)=>{
                    state.indexShow = newData;
                }
            },
            getters:{
                getListData:(state)=>{
                    return state.listData||'null';
                },
                getArticleData:(state)=>{
                    return state.articleData||'null';
                },
                getShowData:(state)=>{
                    return state.show||'null';
                },
                getIsArticleShow:(state)=>{
                    return state.isArticleShow;
                },
                getIndexShowData:(state)=>{
                    return state.indexShow;
                }
            }
        }),
    };

    let CDA = {
        /*
        * 文章显示区域
        * */
        props:['CDAWidth','CDAHeight','CDALeft','CDACont_w'],
        template:
        '<transition name="cda">'+
        '<div @click="updateIndexShow" v-if="getArticle" id="CDA" >' +
            '<div id="title" :style=[preStyle,titleStyle]>{{getTitle}}</div>'+
            '<article id="content" :style=[preStyle]>{{getContent}}</article>'+
        '</div>'+
        '</transition>',
        data:function () {
            return{
                CDAStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#d9dadb',
                    float:'left',
                    width:window.innerWidth+'px',
                    height:100+'%'
                },
                titleStyle:{
                    fontWeight:900,
                    textAlign:"center",
                    paddingBottom:60+'px'
                },
                preStyle:{
                    position:'relative',
                    display:'block',
                    backgroundColor:'#d9dadb',
                    fontSize:48+'px',
                    whiteSpace:'pre-wrap',
                    wordBreak:'break-all',
                    float:'left',
                    width:window.innerWidth+'px',
                    height:100+'%'
                },
            }
        },
        computed:{
            getTitle:function () {
                return this.$store.getters.getArticleData.title;
            },
            getContent:function () {
                return this.$store.getters.getArticleData.content;
            },
            getArticle:function () {
                /*
                * 决定是否显示article标签
                * */
                return this.$store.getters.getIsArticleShow;
            }
        },
        methods:{
            updateIndexShow:function (event) {
                if(event.clientX<80){
                    this.$store.commit('updateIndexShow',true);
                    this.$store.commit('updateIsArticleShow',false);
                }else{
                    this.$store.commit('updateIndexShow',false);
                }
            },
            boxStyle_h:function () {
                return 190;
            },
            img_w:function () {
                return 220;
            },
            updateCDAStyle:function () {
                this.$data.CDAStyle.width = this.$props.CDAWidth+'px';
                this.$data.CDAStyle.height= this.$props.CDAHeight+'px';
                this.$data.CDAStyle.left = this.$props.CDALeft+'px';
            },
            updateBoxStyle:function () {
                this.$data.preStyle.width = this.$props.CDAWidth+'px';
                this.$data.preStyle.height = this.boxStyle_h()+'px';
            },
            resize:function () {
                this.updateBoxStyle();
                this.updateCDAStyle();
            }
        },
        mounted:function () {
            // unit.observer.add('CDA',this.resize);
        },
        components:{
        }
    };
    let list = {
        /*
        * 文章列表
        * */
        props:['listWidth','listHeight','listJson'],
        template:
        '<ul >' +
            '<li :id="this.$props.listJson.article_title" :style=[liStyle] @click="clickEvent" >{{dataJson.article_title}}</li>' +
        '</ul>',
        data:function () {
            return {
                liId:this.$props.listJson.article_title,
                dataJson:this.$props.listJson,
                liStyle:{
                    position:'relative',
                    display:'inline-block',
                    color:'#000000',
                    fontSize:70+'px',
                    cursor:'Pointer',
                    left:0
                    // textAlign:'center'
                },
            }
        },
        methods:{
            getLeft:function () {
                let li = document.getElementById(this.$data.liId);
                let patt = /\d*/;
                let width = patt.exec(window.getComputedStyle(li).width);
                this.$data.liStyle.left = ((window.innerWidth-width)/2)+'px';
            },
            clickEvent:function () {
                this.updateShow();
                this.getArticleCont();
            },
            updateShow:function () {
                /*
                * 决定是否显示article标签和index组件
                * */
                this.$store.commit('updateIndexShow',false);
                this.$store.commit('updateIsArticleShow',true);
            },
            getArticleCont:function () {
                /*
                * 点击list中的文章后,会提交该文章的标题到vuex,并将内容清空
                * 与此同时会向后台请求文章内容,后台返回文章内容后,会更新vuex中相应的部分
                * */
                let _this = this;
                let title = _this.$data.dataJson.article_title;
                this.$store.commit('updateArticle',{title:title});
                axios.post('queryArticle',{article_title:title})
                    .then(function (response) {
                        _this.$store.commit('updateArticle',{title:title,content:response.data});
                    });
            }
        },
        mounted:function () {
            this.getLeft();
        }
    };
    let index = {
        /*
        * 文章目录
        * */
        props:['indexWidth','indexHeight','indexCont_w'],
        template:
        '<transition name="re-index">'+
            '<div id="RE_index" :style=[indexStyle] v-show="show" >' +
                '<canvas :id="getCanvasId()" :style=[canvasStyle] ></canvas>'+
                '<list v-for="num in folderProps.folderJson" :key="num.listName" :listJson="num" :listWidth="folderProps.w" :listHeight="folderProps.h"></list>' +
            '</div>'+
        '</transition>',

        data:function () {

            return {
                folderProps:{
                    w:window.innerWidth,
                    h:30,
                    folderJson:new Array(0),
                },
                imgStyle:{
                    position:'absolute',
                    display:'inline',
                    width:window.innerWidth+'px',
                    height:window.innerHeight+'px'
                },
                canvasStyle:{
                    position:'absolute'
                },
                indexStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#cecece',
                    zIndex:2,
                    width:this.getW()+'px',
                    height:this.getH()+'px'
                }
            }
        },
        computed:{
            show:function () {
                return this.$store.getters.getIndexShowData;
            }
        },
        methods:{
            getW:function () {
                return window.innerWidth;
            },
            getH:function () {
                return window.innerHeight;
            },
            getCanvasId:function () {
                return 'myCanvas'
            },
            _cp_ii:function () {
                cp_ii.run(this.getCanvasId(),this.getW(),this.getH(),4,2);
            },
            imgRequest:function () {
                /*向后台请求背景图片*/
                /*已经用动态背景替换掉该功能,或许这个功能以后会用到*/
                let _this = this;
                let url = '/img/02.jpg';
                axios.post(url).then(function (res) {
                    _this.$data.indexStyle.backgroundImage = 'url('+res.data+')';
                })
            },
            defaultFolder:function () {
                let folderJson = this.$data.folderProps.folderJson[0];
                this.$store.commit('updateListData',folderJson);
            },
            axiosArticleList:function () {
                let _this = this;
                axios.post('queryArticleTitleList')
                    .then((response)=>{
                        _this.$data.folderProps.folderJson = response.data;
                        _this.$store.commit('updateListData',_this.$data.folderProps.folderJson);
                    })
            },
            axiosArticleCont:function () {

            }
        },
        created:function () {
            this.axiosArticleList();
        },
        mounted:function () {
            this.defaultFolder();
            this._cp_ii();
        },
        beforeDestroy:function () {
            cp_ii.stop();
        },
        components:{
            'list':list
        }
    };
    let root = {
        store:RE_unit.store,
        template:
        '<transition name="re">'+
        '<div id="record_event" :style=[rootStyle]>' +
        '<index :indexWidth="indexProps.w" :indexCont_w="indexProps.content_w" :indexHeight="indexProps.h"></index>' +
        '<content-display-area :CDAWidth="CDAProps.w" :CDAHeight="CDAProps.h" :CDACont_w="CDAProps.content_w" :CDALeft="CDAProps.left"></content-display-area>' +
        '</div>'+
        '</transition>',
        data:function () {
            return {
                indexProps:{
                    w:this.indexProps_w(),
                    //content_w该属性是子组件的内容所需要的宽度,否则会出现底部滚动条
                    content_w:this.indexProps_w()-this.getScrollbar_w(),
                    h:this.indexProps_h()
                },
                CDAProps:{
                    w:window.innerWidth-this.indexProps_w(),
                    //content_w该属性是子组件的内容所需要的宽度,否则会出现底部滚动条
                    content_w:window.innerWidth-this.indexProps_w()-this.getScrollbar_w(),
                    h:this.indexProps_h(),
                    left:this.indexProps_w()
                },
                ACProps:{
                    imgSrc:RE_config.logoSrc
                },
                rootStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#7f7f7f',
                    width:100+'%',
                    height:window.innerHeight+'px'
                }
            }
        },
        methods:{
            getScrollbar_w:function () {
                return config.scrollbar_w;
            },
            indexProps_w:function () {
                return 150;
            },
            indexProps_h:function () {
                return window.innerHeight;
            },
            updateCDAProps:function () {
                this.$data.CDAProps.w = window.innerWidth-this.indexProps_w();
                this.$data.CDAProps.h = this.indexProps_h();
            },
            updateIndex:function () {
                this.$data.indexProps.h = this.indexProps_h();
            },
            updateRootStyle:function () {
                this.$data.rootStyle.height = window.innerHeight+'px';
            },
            resize:function () {
                this.indexProps_h();
                this.updateCDAProps();
                this.updateIndex();
                this.updateRootStyle();
            }
        },
        components:{
            'index':index,
            'content-display-area':CDA
        },
        mounted:function () {
            unit.observer.add('re_root',this.resize);
        }
    };

    let rootInstance = {
        /*构建该js的vue实例所用*/
        el:'#root',
        template:
            '<container></container>',
        components:{
            'container':root
        }
    };

    let commitTitle = function (_title) {
        /*
        * 给其他的模块提供修改本模块显示内容的功能
        * */
        axios.post('queryArticle',{article_title:_title}).then(function (response) {
            RE_unit.store.commit('updateArticle',{content:response.data});
        });

    };

    return {
        root:rootInstance,
        commitTitle:commitTitle
    };
}());
export default record_event;